<template>
  <div>
    <h2>Pro</h2>
    <MyCon ref="mycon"></MyCon>
    <hr />
    <!-- 动态组件 -->
    <keep-alive>
      <component :is="currentCard"></component>
    </keep-alive>
    <button @click="changeCard">点击切换组件</button>
  </div>
</template>

<script>
import MyCon from "../components/MyCon.vue";
import OneCard from "../components/OneCard.vue";
import TwoCard from "../components/TwoCard.vue";
import ThreeCard from "../components/ThreeCard.vue";
export default {
  data() {
    return {
      currentCard: "OneCard",
    };
  },
  components: {
    MyCon,
    OneCard,
    TwoCard,
    ThreeCard,
  },
  created() {},
  mounted() {
    // 使用 ref 绑定在 dom 元素上得到的是 DOM 节点
    // 使用 ref 绑定在 子组件上 得到的是 当前子组件的实例化对象，权限极高，谨慎使用
    console.log(this.$refs.mycon);
  },
  methods: {
    changeCard() {
      if (this.currentCard === "OneCard") {
        this.currentCard = "TwoCard";
        return;
      }
      if (this.currentCard === "TwoCard") {
        this.currentCard = "ThreeCard";
        return;
      }
      if (this.currentCard === "ThreeCard") {
        this.currentCard = "OneCard";
        return;
      }
    },
  },
};
</script>

<style>
</style>